<template>
  <div>
    <DynamicScroller
        :items="items"
        :min-item-size="30"
        class="scroller"
        :emitUpdate="true"
        @update="update"
        @resize="resize"
        @visible="visible"
        @hidden="hidden"
        @scroll="scroll"
        v-if="items.length"
    >
      <template v-slot="{ item, index, active }">
        <DynamicScrollerItem
            :item="item"
            :active="active"
            :size-dependencies="[item.message]"
            :data-index="index"
        >
          <li class="single-item" :key="item.id">
            <div class="left-pic"><img :src="item.img" alt="" /></div>
            <div class="right-info">
              <span>标题：{{ item.title }}</span>
              <span>项目数量：{{ item.id }}</span>
              <span>项目时间:{{ item.time }}</span>
              <span>项目描述:{{ item.des }}</span>
            </div>
          </li>
        </DynamicScrollerItem>
      </template>
    </DynamicScroller>
  </div>
</template>
<script>
export default {
  name: 'DynamicScrollerView',
  data () {
    return {
      items: []
    }
  },
  created () {
    this.getData()
  },
  mounted () {},
  methods: {
    getData () {
      for (let i = 0; i < 30; i++) {
        let item = {title: '标题'+i, id: i, time: new Date(), des: "描述"+i, message: "消息"}
        this.items.push(item)
      }
    },
    scroll () {
      console.log(111)
    },
    update (start, end) {
      if (end === this.items.length) {
        for (let i = end; i < 30 + end; i++) {
          let item = {title: '标题'+i, id: i, time: new Date(), des: "描述"+i, message: "消息"}
          this.items.push(item)
        }
      }
    },
    resize () {
      console.log('resize')
    },
    visible () {
      console.log('visible')
    },
    hidden () {
      console.log('hidden')
    }
  }
}
</script>
<style lang="scss" scoped>
.scroller {
  height: 300px;
  background-color: #ccc;
}

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
}
.single-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid rgb(187, 167, 167);
  .left-pic {
    width: 200px;
    img {
      width: 200px;
    }
  }
  .right-info {
    padding-left: 20px;
    text-align: left;
    span {
      display: block;
      &:last-child {
        word-break: break-all;
      }
    }
  }
}
</style>